<template>
  <div v-loading="loading">
    <div class="container">
      <div class="handle-box">
        <el-button type="info"><el-icon><Refresh /></el-icon></el-button>
        <!-- <el-button type="primary" :icon="Plus" @click="addRole">新增</el-button> -->
        <!-- <el-button type="danger" :icon="Delete">删除</el-button> -->
      </div>
      <el-table :data="data.historyData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="pid" label="父级"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-tag
                :type="scope.row.status === 'normal' ? 'success' : scope.row.status === 'hidden' ? 'danger' : ''"
            >
              {{ scope.row.status==='normal'? '正常':'失效'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template #default="scope">
            <el-button v-if="scope.$index!=0" text :icon="Edit" @click="edit(scope.$index, scope.row)" v-permiss="15">
              编辑
            </el-button>
            <el-button v-if="scope.$index!=0" text :icon="Delete" class="red" @click="deleteCommon(scope.$index, scope.row)" v-permiss="16">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="data.curPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="data.pageSize"
            :total="data.dataCount"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" v-model="editVisible" width="30%">
      <el-form label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
      </template>
    </el-dialog>
    <editAdminGroup v-on:onItemChange="getAllDatas" ref="editPopUp"></editAdminGroup>
  </div>
</template>

<script setup lang="ts" name="basetable">
import editAdminGroup from "./children/admingroup/editAdminGroup.vue";
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Plus } from '@element-plus/icons-vue';
import { adminGroupSearch } from "../api/index";

const addMenu = ref(); //ref方法是让我们的简单类型数据变成响应式数据；在方法里改变时需要.value来获取
const editPopUp =ref();
const loading=ref(false);



interface User {
  id: number;
  username: string;
  email: string;
  mobile: string;
  avatar: string;
  status: string
  createtime: string

}


// reactive 数据双向绑定；让我们的复杂类型数据变成响应式数据；不需要.value来获取
const data = reactive({
  dataText: "", //表格开始置空
  dataCount: 0, //共几条
  pageSize: 10, // 每页显示多少条
  curPage: 1, //第几页
  now_name: "",
  name: "",
  systemFlags: [{
    name: '集约式直饮水智能售水系统',
    id: 'water'
  }, {
    name: '污染源在线监测平台',
    id: 'pollution'
  }],
  historyData: [], //回显到表格的数据
  small: false,
});
//获取初始数据
onMounted(() => {
  if (localStorage.getItem("systemFlag") == undefined) {
    data.now_name = data.systemFlags[0].id;
  } else {
    data.now_name = localStorage.getItem("systemFlag") || '';
  };

  getAllDatas()
});
const systemFlagChange = (val: string) => {
  localStorage.setItem("systemFlag", val)
  getAllDatas();
};
//表格初始查询
const getAllDatas = () => {
  data.dataText = "";
  data.historyData = [];
  data.curPage = 1;
  getAllListLink();
};
const getguiling = () => {
  localStorage.setItem("systemFlag", '')
  let data ={
    now_name: "",//搜索框运行完归零。清空
  }
  let params = {
    systemFlag: '',//搜索框清空
  }
}
//获取表格列表数据
const getAllListLink = () => {
  let params = {
    action:'apiindex',
    sort:'id',
    order:'acs',
    name:data.name,//搜索框
    systemFlag: data.now_name,//搜索框
    pageNum: data.curPage, //第几页
    pageSize: data.pageSize,// 每页显示多少条
  }
  loading.value=true;
  adminGroupSearch(params).then(res => {
    console.log(res);
    // getguiling();
    if (res.status == 200) {
      data.dataCount = res.data.total
      if (res.data.total != 0) {
        data.historyData = res.data.rows;
      } else {
        data.dataText = "暂无数据";
      }
    } else if (res.status !== 200) {
      data.dataText = "暂无数据";
      ElMessage({
        showClose: true,
        message: res.statusText,
        type: 'error',
      })
    }
  }).finally(()=>{
    loading.value=false;
  })
};
//分页改变
const changepage = (index: number) => {
  data.curPage = index;
  getAllListLink();
};
//每页条数切换
const handleSizeChange = (val: number) => {
  // data.curPage = 1;
  data.pageSize = val;
  getAllListLink();
};
//当前页数切换
const handleCurrentChange = (val: number) => {
  data.curPage = val;
  // data.pageSize = 10;
  getAllListLink();
};

//删除-接口
const deleteCommon = (idnex: number,row: User) => {
  let params = {
    action:'apidel',
    id: row.id
  }

  adminGroupSearch(params).then(res => {
    console.log(res)
    if (res.status == 200) {
      ElMessage({
        showClose: true,
        message: '操作成功',
        type: 'success',
      })
      getAllDatas();
    } else if (res.status !== 200) {
      ElMessage({
        showClose: true,
        message: res.data.msg,
        type: 'error',
      })
    }
  })
};
//添加
const addRole = () => {
  editPopUp.value.addItemShow(data.now_name)
};
//编辑
const edit = (index: number, row: any) => {
  console.log(index);
  console.log(row);
  editPopUp.value.addItemShow2(row, data.now_name)
};

//参考 https://blog.csdn.net/Hei_lovely_cat/article/details/126105403

// 获取表格数据
// 查询操作
const handleSearch = () => {
  console.log(data.name)
  localStorage.setItem("systemFlag", data.name)
  getAllDatas();
};


let datas = {
  action:'apiindex',
  pageIndex: 1,//当前页数，支持 .sync 修饰符	 number
  pageSize: 10//每页显示条目个数，支持 .sync 修饰符 number
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
  name: '',
  address: ''
});
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
  idx = index;
  form.name = row.name;
  form.address = row.address;
  editVisible.value = true;
};
const saveEdit = () => {
  editVisible.value = false;
  ElMessage.success(`修改第 ${idx + 1} 行成功`);
};

</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #F56C6C;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
